<template>
    <div class="mains">
        <img :src="store.detailList.poster" alt="" style="width: 100%;position: absolute;top: -20%;">
        <img src="../assets/zzt.png" alt="" style="width: 30px;
                height: 30px;position:absolute;top: 5px;left: 5px;" @click="toList">
        <div class="text">
            <div class="head" style="position:absolute;left:0;
                            top: 31%;background-color:white;
                            height: 200px; padding: 0 15px;">

                       <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 15px;">
                        <span style="font-size: 18px;">{{store.detailList.name  }}</span>
                        <!-- <span>{{ store.detailList.filmType.name }}</span> -->
                        <span style="color: #ffb232;font-size: 20px;"> <em>{{ store.detailList.grade }}</em></span>    
                       </div>
                       <div class="item">
                        <span>{{ store.detailList.category }}</span> 
                       </div>
                       <div class="item">2023.8.30上映</div>
                       <div class="item">
                        <span >{{ store.detailList.nation }}</span> |
                       <span >{{ store.detailList.runtime }}分钟</span>
                       </div>
                       <div class=" ellipse" style="font-size: 13px;
                                margin-top: 5px;color: #797d82;" >{{store.detailList.synopsis}}</div>
                       <div>
                       </div>
            </div>
        </div>
       <div class="foot" >
        <div style="position:absolute ;top: 56%;left: 15px;margin: 10px 0;">演职人员</div>

        <ul style="position: absolute;top: 60%;left: 15px;
            display: flex;justify-content: space-between;width: 360px;
            margin-top: 10px;overflow-x: auto;">
            <li v-for="item in store.detailList.actors" 
            style="width: 85px;padding: 0 8px;text-align: center;">
                <img :src="item.avatarAddress" alt="" style="height: 100px;">
                <br>
                <span style="font-size: 12px;padding-top: 10px;
                    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                <br>
                <span style="font-size: 10px;color: #797d82;
                    ">{{ item.role }}</span>
            </li>
        </ul>
       </div>

       <div class="bottom" style="position: relative;top: 80%;left: 15px;margin-top: 5px;">
        <div class="he" style="display: flex;justify-content: space-between;align-items: center;">
            <span>剧照</span>
            <!-- <span style="padding-right: 40px;font-size: 13px;color: #797d82;">全部({{ store.detailList.photos.length }}) > </span> -->
        </div>
        <div class="phone" >
            <ul style="margin-top: 20px;display: flex;overflow-x: auto;
                justify-content: space-between;
                width: 370px;">
                <li class="list" v-for="item in store.detailList.photos" style="margin-right: 10px;">
                <img :src="item" alt="" style="width: 150px;height: 84px;" >
                </li>
            </ul>
        </div>

        <div class="button" style="width: 100%;height: 50px; line-height: 50px; color: white;
        background-color: #ff5f16;text-align: center;
        position: fixed;bottom: 0;left: 0;z-index: 1000;" @click="toListCinemas(store.filmId)">
            选座购票
        </div>
       </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import listStore from "../store/index"
import { useRoute } from 'vue-router';
import router from "../router/index"


const store = listStore()
const route = useRoute()

onMounted(()=>{
    store.filmId = route.params.filmId
    store.getDetailList(store.filmId)
    store.bottom = false
})

// 点击返回箭头跳转
const toList = (()=>{
    router.push("/list")
})

// 点击选座购票回调
const toListCinemas = ((filmId)=>{
    console.log("购票",filmId);
    router.push(`/list/${filmId}/cinemas`)
})
</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.mains {
    background-color: #f4f4f4;
    height: 100vh;
}
.item {
    color: #797d82;
    font-size: 13px;
    margin-top: 5px;
}
/*  第6行的末尾显示省略号 */
.ellipse{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list :last-child {
    margin-right: 0;
  }

</style>